<template>
<div class=''>
    <el-row :gutter="10">
         <el-col :span="4">
    <el-page-header @back="goBack" content="结算订单展示"></el-page-header>
    
         </el-col>
        <el-col :span="1"><el-button type="primary" icon="el-icon-printer" size="small " @click="wzdy()">打印</el-button></el-col>
     </el-row>
订单号：{{rid}}
    <div id="jsdd">
        <div>
		<table border="" style="border: 1px dotted #000;float: left;">
			<tr>
				<th>
					项目编号
				</th>
				<th>
					数量
				</th>
				<th>
					原价
				</th>
				<th>
					故障原因
				</th>
				
				<th>
					免单原因
				</th>
			</tr>
			<tr v-for="(obj,i) in lscql" :key="i">
				<td>{{obj.rbprojectid}}</td>
				<td>{{obj.rbprojectsl}}</td>
				<td>{{obj.yprice}}</td>
				<td>{{obj.rbprojectyy}}</td>
				<td>{{obj.nocharge}}<span v-if="obj.nocharge==''">无</span></td>
			</tr>
		</table>
		<table border="" style="border: 1px dotted #000;margin-left: 20px;">
			<tr>
				<th>
					附加项目
				</th>
				<th>
					价格
				</th>				
	
				<th>
					备注
				</th>
			</tr>
			<tr v-for="(obj,i) in lscse" :key="i">
				<td>{{obj.subjoinitemname}}</td>
				<td>{{obj.subjoinprice}}</td>
				<td>{{obj.remark}}</td>
			</tr>
		</table>
		<div >
			<h4 style="display: inline-block;">客户姓名:</h4>
			<span style="margin:0px 0px 0px 10px;"> {{list.redriver}}</span>
			<h4 style="display: inline-block;margin:0px 10px;">结算类型:</h4> {{list.clearingformname}}
			<h4 style="display: inline-block;margin:0px 10px;">实付价格:</h4> {{price}}
		</div>
        </div>
    </div>
</div>
</template>

<script src="print.js"></script>
<script>
import print from 'print-js'
export default {
data() {
//这里存放数据
return {
list:{},
rid:"",
price:"",
lscql:[],
lscse:[],
};
},
//计算属性
computed: {},
//方法集合
methods: {
goBack() {
        location.href="http://127.0.0.1:8888/#/index/lsettle"
      },
 wzdy(){
        print({
            printable:'jsdd',
            type:"html",
            scanStyles:false,
            headerStyle:'font-size:25px;font-weight: 300;',
            header:'订单详情',
            documentTitle:"株洲九郎山4s店",
            targetStyle:['*'],
            ignoreElements:['no-print','bc','gb'],
            style: ''

        })
     },
      xmxq(){
        let th =this
        this.$http.get("http://localhost:8080/c/lscrpj/lscql",{
        params:{
            rid:th.rid
        }
        }).then(resp=>{
            th.lscql=resp.data
           // console.log(th.lscql)
        })
    },
    fjxm(){
         let th =this
        this.$http.get("http://localhost:8080/c/lscsvia/qrid",{
        params:{
            rid:th.rid
        }
        }).then(resp=>{
            th.lscse=resp.data
           // console.log(th.lscse)
        })
    },

},
//挂载完成（可以访问DOM元素）
mounted() {
    let th=this
    this.rid=this.$route.params.rid
    this.price=this.$route.params.price
     this.$http.get("http://localhost:8080/c/rucf/qrxq",{
        params:{
            rid:th.rid
        }
    }).then(resp=>{
        th.list=resp.data
        console.log(th.list)
    })
    this.xmxq()
    this.fjxm();
     this.jgjs();
     this.wzdy();
},
//监控data中的数据变化
watch: {

}
}
</script>
<style  scoped>
/*@import url(); 引入公共css类*/

</style>